<template>
  <div>
    <div>
      <el-button @click="handleValidate">校验</el-button>
      <el-button @click="handleAdd">添加</el-button>
      <BsTableCtrl refer-style="margin-left: 30px" :tableRef="tableRef"></BsTableCtrl>
    </div>
    <BsTable dragable drag-handle-class="drag-item" :columns="columns" :data="data" ref="tableRef" />
  </div>
</template>
<script setup lang="ts">
import BsTable from '@/components/table/BsTable.vue'
import BsTableCtrl from '@/components/table/BsTableCtrl.vue'
import { ElTag } from 'element-plus'
import {h, ref} from 'vue'

const tableRef = ref()
const columns:ColumnItem[] = [
  {
    label: '序号',
    type: 'index',
    _disabled: true,
    className: 'drag-item',
    width: 60,
    prop: 'index'
  },
  // {
  //   type: 'expand',
  //   prop: 'expand',
  //   renderExpand: (row) => {
  //     console.log(row)
  //     return h('div', {}, '测试')
  //   }
  // },
  {
    label: '测试',
    prop: 'test',
    bodyOptions: {
      type: 'input',
      bind: (_row: any) => {
        return {
          placeholder: '请输入测试'
        }
      },
      validator: (row) => {
        if (row.test) {
          return ''
        }
        return '请输入必填项'
      }
    }
  }, {
    label: '测试22',
    prop: 'test22',
    bodyOptions: {
      type: 'switch',
      bind: () => {}
    }
  }, {
    label: '自定义组件',
    prop: 'test2221',
    headOptions: {
      type: 'custom',
      bind: () => {
        return {
          component: BsTableCtrl,
          referStyle: 'color: red',
          id: ''
        }
      }
    },
    bodyOptions: {
      type: 'custom',
      bind: () => {
        return {
          component: BsTableCtrl,
          referStyle: 'color: red',
          id: ''
        }
      }
    }
  }, {
    label: '自定义组件VNode',
    prop: 'custom-vnode',
    headOptions: {
      type: 'custom',
      bind: () => {
        return h(BsTableCtrl, {referStyle: 'color: red'})
      }
    },
    bodyOptions: {
      type: 'custom',
      bind: () => {
        return h(BsTableCtrl, {referStyle: 'color: red'})
      }
    }
  }, {
    label: '测试22',
    prop: 'test22',
    tooltip: (row) => {
      return '测试显示文案' + row.test
    },
    bodyOptions: {
      type: 'html',
      bind: (row: any) => {
        return {
          html: `<span style="color: red">${row.test}</span>`
        }
      }
    }
  },
  {
    label: 'formatterNode',
    prop: 'formatter',
    formatter: (_row, _index) => {
      return h('span', {style: {color: 'red'}}, '测试formatter')
    }
  },
  {
    label: 'formatterStr',
    prop: 'formatterStr',
    formatter: (_row, _index) => {
      return '测试格式化字符串'
    }
  },
  {
    label: 'formatterRpg',
    prop: 'formatterpg',
    formatter: (_row: any) => {
      return h(ElTag, {type: 'warning', effect: 'light'}, {default: () => '处理中'})
    }
  },
  {
    label: '操作',
    prop: 'action',
    fixed: 'right',
    bodyOptions: {
      type: 'button',
      bind: (row:any) => {
        return {
          buttons: [{
            text: '校验',
            onClick: () => {
              tableRef.value.validateRow(row)
            }
          }]
        }
      }
    }
  }
]

const data = ref([{test: ''}, {test: 111}, {test: 233}, {test: 455}])

const handleAdd = () => {
  data.value.unshift({test: ''})
}

const handleValidate = () => {
  tableRef.value.validate().then(() => {
    console.log('成功')
  }, () => {
    console.log('校验失败')
  })
}

</script>

<style lang="scss">
</style>